{% extends 'layui/edit.html' %}
{% load i18n static common %}
{% block edit_form %}
    <form class="layui-form data-form" action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div>
            {% with adminform.form as f %}
                <div class="layui-form-item {% if not request.user.is_superuser or f.base_fields.company.queryset.count == 1%} layui-hide {% endif %}">
                    {% layui_inline f.company %}
                </div>
                <div class="layui-form-item">
                    {% layui_inline f.workflow_code %}
                    {% layui_inline f.workflow_name %}
                </div>
                <div class="layui-form-item">
                    {% layui_inline f.departments %}
                    {% layui_inline f.applicant_position %}
                </div>
                <div class="layui-form-item">
                     <div class="layui-inline field-before">
                        <label class="layui-form-label"
                               for="id_type">{% trans 'workflowEngine_field_employee' %}</label>
                        <div class="layui-input-inline ">
                            <input name="type" id="id_type" lay-filter="id_type" value="" class="layui-input" readonly>
                            <div id="employee_origin">
                                <script>
                                    var employee_origin_name = '';
                                    var globalEmpSelected = [];
                                    {% if f.instance.id %}
                                        {% for item in f.instance.employee.all %}
                                            $('#employee_origin').append('<input type="hidden" name="employee" value="{{ item.id }}"/>');
                                            employee_origin_name = '{{ item.emp_code }}' + ',' + employee_origin_name;
                                            var emp_item = {
                                                id: {{ item.id }},
                                                emp_code: '{{ item.emp_code }}',
                                                {% if item.first_name %}
                                                    first_name: '{{ item.first_name }}',
                                                {% else %}
                                                    first_name: '',
                                                {% endif %}
                                                {% if item.last_name %}
                                                    last_name: '{{ item.last_name }}',
                                                {% else %}
                                                    last_name: '',
                                                {% endif %}
                                                {% if item.department.dept_name %}
                                                    dept_name: '{{ item.department.dept_name }}',
                                                {% else %}
                                                    dept_name: '',
                                                {% endif %}
                                            }
                                            globalEmpSelected.push(emp_item)
                                        {% endfor %}
                                    {% endif %}
                                    $('#id_type')[0].value = employee_origin_name;
                                </script>
                            </div>
                        </div>
                    </div>
                    {% layui_inline f.content_type %}
                </div>
                <div class="layui-form-item">
                    {% layui_inline f.start_date %}
                    {% layui_inline f.end_date %}
                </div>
                <div class="layui-hide">{{ f.workflow_node }}</div>

            {% endwith %}
        </div>
        <div class="layui-form-item work-flow" style="width: 750px">
            <table id="id_wf_workflownode" class="layui-hide" lay-filter="wf_workflownode"></table>
            <script type="text/html" id="wf_workflownode_toolbar">
                <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
            </script>
        </div>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"
               style="color:#E84C3D;background-color:transparent">
                <i class="fa fa-fw fa-trash-o"></i>
            </a>
        </script>
        <script>
            layui.use(['table', 'form', 'element', 'layer'], function () {
                var table = layui.table, layer = layui.layer, form = layui.form;
                var nodes = $("#id_workflow_node").val();
                var data = null;
                if (nodes != "") {
                    data = JSON.parse(nodes);
                } else {
                    data = [];
                }
                var node_table = table.render({
                    id: "id_wf_workflownode"
                    , elem: "#id_wf_workflownode"
                    , toolbar: "#wf_workflownode_toolbar"
                    , defaultToolbar: []
                    , canSelectRow: 'false'
                    //LAY_CHECKED: true,
                    , autowidth: 'true'
                    , height: '220'
                    , even: true
                    , cols: [
                        [
                            {
                                field: 'node_code',
                                title: "{% trans 'node_code' %}",
                                edit: 'text',
                                sort: true,
                                width: 200
                            },
                            {field: 'node_name', title: "{% trans 'node_name' %}", edit: 'text', width: 200},
                            {field: 'operation', title: "", toolbar: '#barDemo'}
                        ]
                    ]
                    , url: ""
                    , data: data
                    , text: {
                        none: gettext("none_data")
                    }
                    , loading: true
                    , page: false
                });
                if (globalEmpSelected.length) {
                    $('#{{ model_name }}_edit_form input[id^="applicant_position"]').attr("disabled", "disabled")
                    $('#{{ model_name }}_edit_form input[id^="applicant_position"]').attr("value", "")
                    $('#{{ model_name }}_edit_form input[name^="applicant_position"]').attr("value", "");
                    $('#{{ model_name }}_edit_form input[id^="departments"]').attr("disabled", "disabled")
                    $('#{{ model_name }}_edit_form input[id^="departments"]').attr("value", "")
                    $('#{{ model_name }}_edit_form input[name^="departments"]').attr("value", "");
                }
                table.on('edit(wf_workflownode)', function (obj) {
                    var value = obj.value
                        , data = obj.data
                        , field = obj.field;
                    $("#id_workflow_node").val(JSON.stringify(table.cache['id_wf_workflownode']));
                });
                table.on('toolbar(wf_workflownode)', function (obj) {
                    var oldData = table.cache["id_wf_workflownode"];
                    var table_cache = new Array();
                    for (var i = 0; i < oldData.length; i++) {
                        if (oldData[i].length != 0) {
                            table_cache.push(table.cache['id_wf_workflownode'][i]);
                        }
                    }
                    data = {"node_code": (table_cache.length + 1).toString(), "node_name": '', "operation": ''};
                    table_cache.push(data);
                    node_table.reload({data: table_cache});
                });
                table.on('tool(wf_workflownode)', function (obj) {
                    var data = obj.data;
                    switch (obj.event) {
                        case 'set_approver':
                            break;
                        case 'set_notifier':
                            if (data.approver_type == 0) {
                                layer.alert('{% trans 'notifier_type_no_selected' %}', {title: gettext('layer_title')});
                            } else {
                                console.log(data.notifier_type);
                            }
                            obj.update({notifier: 2222222});
                            break;
                        case 'del':
                            layer.confirm('{% trans 'are_you_sure_to_delete_the_selected_node' %}', {
                                title: 'Prompt',
                                btn: [gettext('btn_confirm'), gettext('btn_cancel')]
                            }, function (index) {
                                obj.del();
                                var table_cache = new Array();
                                for (var i = 0; i < table.cache['id_wf_workflownode'].length; i++) {
                                    if (table.cache['id_wf_workflownode'][i].length != 0) {
                                        table_cache.push(table.cache['id_wf_workflownode'][i]);
                                    }
                                }
                                $("#id_workflow_node").val(JSON.stringify(table_cache));
                                layer.close(index);
                            });
                            break;
                        default:
                            break;
                    }
                });
                form.on('select(approver_type)', function (data) {
                    var elem = $(data.elem);
                    var trElem = elem.parents('tr');
                    var tableData = table.cache['id_wf_workflownode'];
                    tableData[trElem.data('index')][elem.attr('name')] = data.value;
                    $.ajax({
                        url: "{% url 'biotime:node_receiver' %}?receiver=" + data.value,
                        type: "GET",
                        dataType: "html",
                        success: function (callback) {
                            $("td[data-field=approver] .layui-table-cell").html(callback);

                        }
                    });
                });
                form.on('select(notifier_type)', function (data) {
                    var elem = $(data.elem);
                    var trElem = elem.parents('tr');
                    var tableData = table.cache['id_wf_workflownode'];
                    tableData[trElem.data('index')][elem.attr('name')] = data.value;
                });

                $('#id_type').click(function () {
                    if("{{ add }}" == "True"){
                        var company = $('input[name=company]').val();
                        if (company == 'undefined' || company == undefined) {
                            layer.open({
                                time: 1000,
                                content: "{% trans 'company_field_is_required' %}",
                                btn: ['ok'],
                                title: 'Message',
                                icon: 5
                            });
                            returnFalse()
                        }
                    }else{
                        var company = "{{ original.company_id }}";
                    }
                    $.ajax({
                        url: "/personnel/filter_resign_employee/?company=" + company,
                        type: "GET",
                        dataType: "html",
                        success: function (pannel) {
                            layer.open({
                                type: 1,
                                title: "{% trans 'workflowEngine_field_employee' %}",
                                zIndex: 1003,
                                area: ['1080px', '550px'],
                                content: pannel,
                                btn: [gettext("btn_confirm"), gettext("btn_cancel")],
                                success: function (layero, index) {
                                    // 将globalEmpSelected初始化到selected table
                                    for (i = 0; i < globalEmpSelected.length; i++) {
                                        globalEmpSelected[i]['LAY_CHECKED'] = true;
                                    }
                                    var selected_table = table.reload('id-employee-frame-selected', {data: globalEmpSelected});
                                    // 将globalEmpSelected初始化到unselect table
                                    var unselect = table.reload('id-employee-frame-unselect');
                                },
                                yes: function (index, layero) {
                                    var name_val = $('#employeeFrameSelectedDetailContainer').val()
                                    $('#id_type')[0].value = name_val;
                                    $('#employee_origin').html('')
                                    globalEmpSelected = layui.table.checkStatus('id-employee-frame-selected').data;
                                    for (i = 0; i < globalEmpSelected.length; i++) {
                                        $('#employee_origin').append('<input type="hidden" name="employee" value="' + globalEmpSelected[i].id + '"/>');
                                    }
                                    if (globalEmpSelected.length) {
                                        $('#{{ model_name }}_edit_form input[id^="applicant_position"]').attr("disabled", "disabled")
                                        $('#{{ model_name }}_edit_form input[id^="applicant_position"]').attr("value", "")
                                        $('#{{ model_name }}_edit_form input[name^="applicant_position"]').attr("value", "");
                                        $('#{{ model_name }}_edit_form input[id^="departments"]').attr("disabled", "disabled")
                                        $('#{{ model_name }}_edit_form input[id^="departments"]').attr("value", "")
                                        $('#{{ model_name }}_edit_form input[name^="departments"]').attr("value", "");
                                    } else {
                                        $('#{{ model_name }}_edit_form input[id^="applicant_position"]').removeAttr("disabled")
                                        $('#{{ model_name }}_edit_form input[id^="departments"]').removeAttr("disabled")
                                    }
                                    layer.close(index)
                                }
                            });
                        },
                        error: function (response) {
                            console.log(response.responseText);
                        }
                    })
                });
            });
        </script>
    </form>

{% endblock %}